<template>
  <div class="auto-analyze-charts">
    <el-row style="paddingBottom: 10px">
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
        >
          <el-form-item :label="$t('calculationDate')">
            <el-date-picker
              v-model="calculationDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </el-form-item>
          <el-form-item :label="$t('rawDataDate')">
            <el-date-picker
              v-model="rawDataDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t('search') }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card shadow="never">
      <el-row>
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
          style="width: 100%"
          stripe
          fit
          border
          tooltip-effect="dark"
        >
          <el-table-column align="center" label="主要信息">
            <el-table-column
              align="center"
              prop="customer"
              show-overflow-tooltip
              label="客户代码"/>
            <el-table-column
              align="center"
              prop="productName"
              show-overflow-tooltip
              label="产品型号"/>
            <el-table-column
              align="center"
              prop="packagingFormCode"
              show-overflow-tooltip
              label="封装形式"/>
            <el-table-column
              align="center"
              width="140px"
              show-overflow-tooltip
              prop="processSpecificationNo"
              label="工艺规范编号"/>
            <el-table-column
              align="center"
              prop="processFlow"
              show-overflow-tooltip
              label="工序号"/>
            <el-table-column
              align="center"
              prop="binNo"
              show-overflow-tooltip
              label="BinNo"/>
            <el-table-column
              align="center"
              prop="binItem"
              show-overflow-tooltip
              label="BinName"/>
          </el-table-column>
          <el-table-column align="center" label="Trend" width="260px">
            <template slot-scope="scope">
              <div :style="{width: '260px', height: '60px'}">
                <lineChart :data="scope.row.dataList"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="(item, index) in dynRows" :key="index" :label="labels[item]" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.statisticalList[item] }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column align="center" label="平均值" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.statisticalList.mean }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标准差" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.statisticalList.std }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="总计数量" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.statisticalList.count }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="中位数" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.statisticalList.median }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="四分位之差" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.statisticalList.quartileDiff }}</span>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="图表详情" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleChart(scope.row)"
              >查看图表</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <pagination
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :total="total"
        @pagination="getList"
      />
    </el-card>
    <chartModel ref="chartModel"/>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import lineChart from './components/lineChart.vue'
import chartModel from './components/chartModel.vue'
import { getList } from '@/api/auto-analyze-warning/charts'
import { getPackageTypeList } from '@/api/auto-analyze-warning/SBLIndexSetting'
import { pickTime } from '@/utils/pickTime'
export default {
  name: 'AutoAnalyzeCharts',
  components: { lineChart, chartModel },
  mixins: [mySetting],
  data() {
    const searchTags = [
      { label: this.$t('processSpecificationNumber'), prop: 'processSpecificationNo', tag: 'DynInput' },
      { label: this.$t('customer'), prop: 'customerCode', tag: 'DynInput' },
      { label: this.$t('productName'), prop: 'productCode', tag: 'DynInput' },
      { label: this.$t('packageType'), prop: 'packagingCode', tag: 'DynSelect' }
    ]
    return {
      calculationDate: pickTime(30),
      rawDataDate: pickTime(180),
      infoForm: {},
      selectList: {},
      searchTags: Object.freeze(searchTags),
      tableData: [],
      dynRows: [],
      tableLoading: true,
      labels: Object.freeze({
        mean: '平均值',
        std: '标准差',
        count: '总计数量',
        median: '中位数',
        quartileDiff: '四分位之差'
      })
    }
  },
  created() {
    this.initList()
    this.getPackageTypes()
  },
  methods: {
    async initList() {
      const res = await getList(this.$clearNull({ ...this.listQuery, ...this.infoForm,
        calcuStartTime: Array.isArray(this.calculationDate) ? this.calculationDate[0] : '',
        calcuEndTime: Array.isArray(this.calculationDate) ? this.calculationDate[1] : '',
        rawStartTime: Array.isArray(this.rawDataDate) ? this.rawDataDate[0] : '',
        rawEndTime: Array.isArray(this.rawDataDate) ? this.rawDataDate[1] : ''
      }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
      const statisticalList = res.data[0] ? res.data[0].statisticalList : {}
      const keys = Object.keys(statisticalList)
      this.dynRows = keys
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    handleChart(row) {
      this.$refs.chartModel.handleOpen(Object.assign({}, row, this.infoForm, { calcuStartTime: Array.isArray(this.calculationDate) ? this.calculationDate[0] : '',
        calcuEndTime: Array.isArray(this.calculationDate) ? this.calculationDate[1] : '',
        rawStartTime: Array.isArray(this.rawDataDate) ? this.rawDataDate[0] : '',
        rawEndTime: Array.isArray(this.rawDataDate) ? this.rawDataDate[1] : '' }))
    },
    getList(page) {
      this.listQuery = page
      this.initList()
    },
    async getPackageTypes() {
      const res = await getPackageTypeList()
      this.$set(this.selectList, 'packagingCode', res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
